<template>
    <div class="">
        <div class="service-info flex-sb">
            <div v-if="serviceInfo" class="service-info-left flex-center-1">
                <img :src="serviceInfo.info.logo" :alt="serviceInfo.info.name" class="avatar" />
                <div class="content">
                    <div class="name">
                        {{ serviceInfo.info.name }}
                    </div>
                    <div class="tags">
                        <!-- <div class="tag">官方服务商</div> -->
                        <img :src="getServiceType(serviceInfo.info.type)" class="service-type" alt="" />
                    </div>
                    <div class="more" @click="goDetail(serviceInfo.info.id)">
                        官方主页>
                    </div>
                </div>
            </div>

            <div v-if="serviceInfo" class="service-info-right flex-center-1">
                <div class="right-item">
                    <el-button class="pay-info" @click="payInfo">
                        平台结算
                    </el-button>
                </div>
                <div class="right-item right-item1" @click="goDetail(serviceInfo.info.id)">
                    {{ serviceInfo.shoplist.length }}
                    <div>出售服务</div>
                </div>
                <div class="right-item right-item1" @click="goOrdering">
                    {{ serviceInfo.orderlist.length }}
                    <div>进行中订单</div>
                </div>
            </div>
        </div>
        <!-- <div class="ddgj">
            <div class="title">订单跟进</div>
            <div class="ddgj-list flex-sb">
                <div class="ddgj-item">
                    <img src="~/assets/images/about/l2.png" alt="" />
                    <div>
                        待支付
                        <span>待支付的订单</span>
                    </div>
                </div>
                <div class="ddgj-item">
                    <img src="~/assets/images/about/l2.png" alt="" />
                    <div>
                        待支付
                        <span>待支付的订单</span>
                    </div>
                </div>
                <div class="ddgj-item">
                    <img src="~/assets/images/about/l2.png" alt="" />
                    <div>
                        待支付
                        <span>待支付的订单</span>
                    </div>
                </div>
                <div class="ddgj-item">
                    <img src="~/assets/images/about/l2.png" alt="" />
                    <div>
                        待支付
                        <span>待支付的订单</span>
                    </div>
                </div>
            </div>
        </div> -->

        <div class="xxtx">
            <div class="title">消息提醒</div>
            <div class="xx-list">
                <div v-for="(item, index) in messageList" :key="index" class="xx-item">
                    <div class="left">
                        <span v-html="item.info"></span>
                        <span class="ckxq" @click="goOrder(item)">查看详情</span>
                    </div>
                    <div class="right">
                        {{ getTime(item.createtime * 1000) }}
                    </div>
                </div>
                <el-skeleton v-show="loading" :rows="6" />
                <el-empty v-show="!loading && messageList.length == 0" description="暂无数据"></el-empty>

            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

import serviceType5 from "@/assets/images/service/index/serviceType1.png";
import serviceType6 from "@/assets/images/service/index/serviceType6.png";

import { getServiceDetail } from "@/assets/api/service";

import { getmessage } from "@/assets/api/userCenterApi";

import { getTime } from "@/assets/utils/utils";

export default {
    name: "Index",
    components: {},
    data() {
        return {
            serviceInfo: null,
            messageList: [],
            getTime: getTime,
            getServiceType: function (type) {
                switch (type) {
                    case 1:
                        return serviceType5;
                    case 2:
                        return serviceType5;
                    case 3:
                        return serviceType5;
                    case 4:
                        return serviceType5;
                    case 5:
                        return serviceType5;
                    case 6:
                        return serviceType6;
                    default:
                        break;
                }
            },

            loading: false
        };
    },
    beforeDestroy() { },
    beforeMount() { },
    mounted() {
        this.getServiceDetail();
        this.getmessage();
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {},
    methods: {
        ...mapActions("common", ["getUserInfo2"]),
        async getServiceDetail() {
            let userInfo = await this.getUserInfo2();
            if (userInfo) {
                const res = await getServiceDetail({
                    id: userInfo.service_info.id,
                });
                if (res.code == 1) {
                    this.serviceInfo = res.data;
                }
            }
        },

        async getmessage() {
            this.loading = true
            const res = await getmessage({
                page: 1,
                pagesize: 10,
                type: 13,
            });
            this.loading = false
            if (res.code == 1) {
                this.messageList = res.data;
            }
        },

        goDetail(id) {
            this.$router.push({
                path: "/service/servicedetail",
                query: {
                    id: id,
                },
            });
        },
        goOrdering() {
            this.$router.push({
                path: "/service/servicecenter/OrderManage",
                query: {
                    selectStatus: 1,
                },
            });
        },

        goOrder(item) {
            this.$router.push({
                path: "/service/shoporder",
                query: {
                    orderNo: item.from_id,
                },
            });
        },

        go(path) {
            this.$router.push({
                path: path,
            });
        },

        //结算提示
        payInfo() {
            this.$message.info(
                "该线上功能暂未开放，请您联系服务商客服进行结算"
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.service-info {
    background-color: #fff;
    padding: 30px 35px;
    padding-right: 0;
}

.service-info-left {
    .avatar {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        object-fit: cover;
    }

    .content {
        padding-left: 19px;

        .name {
            font-size: 20px;
            color: #333333;
        }

        .more {
            font-size: 14px;
            color: #333333;
            cursor: pointer;
        }
    }

    .tags {
        display: flex;
        padding: 15px 0;

        .tag {
            text-align: center;
            height: 27px;
            line-height: 27px;
            padding: 0 8px;
            background: #ededed;
            border-radius: 4px;
            font-size: 12px;
            color: #333333;
            margin-right: 16px;
        }

        .service-type {
            width: 96px !important;
            height: 24px !important;
            border-radius: 0 !important;
            margin-right: 10px;
        }
    }
}

.service-info-right {
    .right-item {
        width: 144px;
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        color: #333333;

        div {
            padding-top: 16px;
            font-size: 14px;
            color: #333333;
        }

        .pay-info {
            background: #ffffff;
            border-radius: 4px;
            color: #333;
            border: 1px solid #dfdfdf;
            height: 36px;
            width: 100px;
        }
    }

    .right-item1 {
        cursor: pointer;
    }
}

.ddgj {
    background-color: #fff;
    margin: 15px 0;
    padding: 25px 30px;
    padding-bottom: 30px;

    .title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        padding-bottom: 23px;
    }

    .ddgj-list {
        .ddgj-item {
            display: flex;
            align-items: center;
            background-color: #f5f8f9;
            height: 65px;
            padding-left: 35px;
            width: 210px;

            img {
                width: 30px;
                height: 30px;
            }

            div {
                padding-left: 12px;
                color: #847980;
                font-size: 14px;

                span {
                    display: block;
                    font-size: 12px;
                    padding-top: 3px;
                }
            }
        }
    }
}

.xxtx {
    background-color: #fff;
    padding: 25px 30px;
    padding-bottom: 30px;
    margin-top: 12px;

    .title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        padding-bottom: 23px;
    }

    .xx-list {
        padding: 14px 50px;

        .xx-item {
            display: flex;
            justify-content: space-between;
            padding: 14px 0;

            .left {
                font-size: 13px;
                color: #333333;

                .ckxq {
                    color: #1e6cb5;
                    text-decoration: underline;
                    cursor: pointer;
                }
            }

            .right {
                font-size: 14px;
                color: #999999;
            }
        }
    }
}
</style>